<template>
    <div class="container">
        <el-card v-for="work in workList" :key="work.workName" style="margin-top: 20px;">
            <template #header>
                <span style="font-size: 24px;">
                    {{ work.workName }}
                </span>
            </template>
            <el-row>
                <el-col :span="12">
                    <el-statistic :value="work.remainder">
                        <template #title>
                            剩余时间
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="12">
                    <template v-if="work.status === '已完成'">
                        <el-statistic :value="work.status" value-style="color:green">
                            <template #title>
                                完成状态
                            </template>
                        </el-statistic>
                    </template>
                    <template v-else-if="work.status === '待批阅'">
                        <el-statistic :value="work.status" value-style="color:orange">
                            <template #title>
                                完成状态
                            </template>
                        </el-statistic>
                    </template>
                    <template v-else>
                        <el-statistic :value="work.status" value-style="color:red">
                            <template #title>
                                完成状态
                            </template>
                        </el-statistic>
                    </template>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
const workList = [
    {
        workName: "作业1",
        remainder: "2小时35分",
        status: "已完成",
    },
    {
        workName: "作业2",
        remainder: "15小时20分",
        status: "已完成",
    },
    {
        workName: "作业3",
        remainder: "100小时10分",
        status: "未完成",
    },
    {
        workName: "作业4",
        remainder: "350小时35分",
        status: "待批阅",
    },
    {
        workName: "作业5",
        remainder: "1小时35分",
        status: "待批阅",
    }
]
</script>

<style scoped>
.container {
    padding: 20px 0;
}
</style>